<!-- 批发采购收货页面 -->
<template>
  <div class="wholesale-receive">
    <el-container class="container-box is-vertical">
      <div class="block">
        <header>
          <h2>确认收货</h2>
        </header>
        <section class="step-section">
          <el-row :gutter="50">
            <el-col :span="8">
              订单编号
              <span>{{receiveListData.orderCode}}</span>
            </el-col>
            <el-col :span="8">
              供应商
              <span>{{receiveListData.supplierName}}</span>
            </el-col>
            <el-col :span="8">
              生产厂家
              <span>{{receiveListData.originalFactoryName}}</span>
            </el-col>
            <el-col :span="8">
              订单总数量
              <span>{{receiveListData.orderCount}}</span>
            </el-col>
          </el-row>
        </section>
      </div>
      <el-editable
        height="400"
        :columns="receiveListColumns"
        stripe
        :data="receiveListData.orderDeliverList"
        v-loading="loading"
      >
        <template slot="default-action" slot-scope="scope">
          <el-button type="text" @click="getProductDetail(scope.row)">查看产品详情</el-button>
          <el-button type="text" @click="receiveConfirm(scope.row)">收货确认</el-button>
        </template>
      </el-editable>
    </el-container>

    <!-- 产品详情弹窗列表 -->
    <el-dialog
      class="product-detail-dialog"
      title="产品详情"
      :visible.sync="productVisible"
      width="70%"
    >
      <el-editable
        v-loading="isLoading"
        height="400px"
        :columns="productListColumns"
        :payload="productListData"
        :data="productListData.content"
        :needPagination="true"
        stripe
        @reload="reloadProductData"
      ></el-editable>
    </el-dialog>
    <el-dialog
      title="收货确认"
      custom-class="dialog-custom"
      :visible.sync="confirm.visible"
      width="30%"
    >
      <h2>是否要对选中的发货单进行收货确认？</h2>

      <div class="footer">
        <el-button @click="confirm.visible = false">取 消</el-button>
        <el-button type="primary" @click="confirmReceiveOrder">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable';
import { receiveListColumns, productListColumns } from './index.const';
import { orderDeliverList, orderDeliverDetail, confirmOrder } from '@api/m_mall_web_v1.js';
export default {
  name: 'WholesaleReceive',
  components: { ElEditable },
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      productListColumns,
      receiveListColumns,
      productListData: {},
      receiveListData: {},
      rowDetail: {},
      confirmRow: {},
      productVisible: false,
      loading: false,
      isLoading: false,
      orderCode: '',
      confirm: {
        visible: false
      }
    };
  },
  mounted() {
    this.orderCode = this.$route.query.orderCode;
    this.getReceiveList();
  },
  methods: {
    // 查看产品详情
    getProductDetail(row) {
      this.productVisible = true;
      this.rowDetail = row;
      this.getReceiveInfo();
    },
    // 收货确认
    receiveConfirm(row) {
      this.confirm.visible = true;
      this.confirmRow = row;
    },
    // 收货确认弹窗——确认收货按钮
    confirmReceiveOrder() {
      this.$axios
        .$post(confirmOrder, {
          orderCode: this.orderCode,
          deliverCode: this.confirmRow.deliverCode
        })
        .then(res => {
          if (res.payload) {
            this.$message.success('确认收货成功');
            this.getReceiveList();
            this.confirm.visible = false;
          } else {
            this.$message.error('确认收货失败');
          }
        });
    },
    // 获取收货列表数据
    getReceiveList() {
      this.loading = true;
      this.$axios
        .$post(orderDeliverList, {
          orderCode: this.orderCode
        })
        .then(res => {
          if (res.payload) {
            this.receiveListData = res.payload;
            this.receiveListData.orderCount = parseFloat(this.receiveListData.orderCount)
          }
          this.loading = false;
        });
    },
    // 获取收货列表详情数据
    getReceiveInfo() {
      this.isLoading = true;
      this.$axios
        .$post(orderDeliverDetail, {
          deliverCode: this.rowDetail.deliverCode,
          page: this.currentPage,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.payload) {
            this.productListData = res.payload;
          }
          this.isLoading = false;
        });
    },
    // 重新获取列表数据
    reloadProductData(val) {
      this.currentPage = val.number;
      this.pageSize = val.size;
      this.getReceiveInfo();
    }
  }
};
</script>

<style lang="less">
.wholesale-receive {
  padding: 0 !important;
  .container-box {
    height: 100%;
  }
  .block {
    margin-bottom: 0;
    header {
      padding: 15px 8px !important;
    }

    section {
      padding: 15px 8px;

      .el-row {
        color: #999999;

        span {
          color: #333333;
          padding-left: 10px;
        }
      }
    }

    /deep/.el-col {
      margin: 5px 0;
    }
  }
  .el-editable {
    margin: 0 8px;
    height: 400px;
  }
  .dialog-custom {
    h2 {
      text-align: center;
    }
    .footer {
      width: auto;
      text-align: center;
      margin: 30px auto 10px;
    }
  }
}
</style>
